{%extends 'layout.admin.html'%}
{%block content%}
{% load authfilters %}
    
<script src="https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js"></script>

<style type='text/css'>
.img-container {
    display: flex;
    column-gap: 8px;
}
.uploaded-imgs-wrapper {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 6px;
    //max-width: 170px;
    max-height: 106px;
    overflow-y: scroll;
    scrollbar-color: #dfe1ec #fff;
    scrollbar-width: thin;
}
.uploaded-img {
    width: 50px;
    height: 50px;
    background-size: cover;
    border: 2px solid #ffff;
    border-radius: 4px;
    cursor: pointer;
}
.uploaded-img[data-image-editor-active-image=""] {
    border: 2px solid #3daba4;
    transition: border .25s ease-in-out;
}
.add-img {
    width: 50px;
    height: 50px;
    border: 1px solid #dfe1ec;
    background-color: #fff;
    border-radius: 4px;
    background: url() center center;
    background-repeat: no-repeat;
    padding-top: 49px;
    cursor: pointer;
}
</style>

<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row align-items-center">
       <div id="config-wrapper" class="config-table">
            <h1>Free Online Photo Editor</h1>
            <div class="seo-h1">
                <h2>How to Add a Watermark, Resize Your Images in Seconds. Free Alternative to Photoshop Online.</h2>
                <h2>Key Features of Our Photo Editor
                    <h3>Resize and Crop Images with Precision</h3>
                    <h3>Add Text, Watermarks, and Filters to Your Images</h3>
                    <h3>Enhance Photos with Filters & Fine-Tuning</h3>
                </h2>
                <h2>Why Choose Our Web-Based Editing Tool?</h2>
            </div>
            <div class="img-container">
              <div class="uploaded-imgs-wrapper">
                <div class="uploaded-img" style="background-image: url(/dist/img/stephen-walker-unsplash.jpg);" data-image-editor-active-image></div>
                <div class="uploaded-img" style="background-image: url(https://scaleflex.cloudimg.io/v7/demo/river.png);"></div>
                <div class="uploaded-img" style="background-image: url(https://scaleflex.cloudimg.io/v7/demo/spencer-davis-unsplash.jpg);"></div>
                <div class="uploaded-img" style="background-image: url(https://scaleflex.cloudimg.io/v7/demo/damian-markutt-unsplash.jpg);"></div>
                <input class="add-img" type="file" accept="image/*" name="image" id="add-image">
            </div>
         </div>
    </div>
  </div>
</div>


<div class="page-body">
    <div class="container-xl">
       <div class="card">
          <div class="card-body">
            <div id="editor_container" style="width: 100%; height: 600px;"></div>
          </div>
       </div>
    </div>
</div>


<script type='text/javascript'>
function base64ToBlob(base64, mimeType) {
    const binary = window.atob(base64.split(',')[1]);
    const length = binary.length;
    const bytes = new Uint8Array(length);
    for (let i = 0; i < length; i++) {
        bytes[i] = binary.charCodeAt(i);
    }
    return new Blob([bytes], {type: mimeType});
}

function get_active_img() {
    var _url = $('.uploaded-img[data-image-editor-active-image]').css('background-image');
    return _url.split('url("')[1].split('")')[0];
}

$(document).ready(function() {

const { TABS, TOOLS } = FilerobotImageEditor;

const config = {
  source: get_active_img(),
  resetOnImageSourceChange: true,
  onSave: (editedImageObject, designState) => {
    console.log('saved', editedImageObject, designState)
    let link = document.createElement('a');
    link.href = URL.createObjectURL(base64ToBlob(editedImageObject.imageBase64), editedImageObject.mimeType);
    link.download = editedImageObject.fullName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
  },
  annotationsCommon: {
    fill: '#ff0000',
  },
  Text: { text: 'Text' },
  Rotate: { angle: 90, componentType: 'slider' },
  translations: {
    profile: 'Profile',
    coverPhoto: 'Cover photo',
    facebook: 'Facebook',
    socialMedia: 'Social Media',
    fbProfileSize: '180x180px',
    fbCoverPhotoSize: '820x312px',
  },
  Crop: {
    presetsItems: [
      {
        titleKey: 'classicTv',
        descriptionKey: '4:3',
        ratio: 4 / 3,
        // icon: CropClassicTv, // optional, CropClassicTv is a React Function component. Possible (React Function component, string or HTML Element)
      },
      {
        titleKey: 'cinemascope',
        descriptionKey: '21:9',
        ratio: 21 / 9,
        // icon: CropCinemaScope, // optional, CropCinemaScope is a React Function component.  Possible (React Function component, string or HTML Element)
      },
    ],
    presetsFolders: [
      {
        titleKey: 'socialMedia', // will be translated into Social Media as backend contains this translation key
        // icon: Social, // optional, Social is a React Function component. Possible (React Function component, string or HTML Element)
        groups: [
          {
            titleKey: 'facebook',
            items: [
              {
                titleKey: 'profile',
                width: 180,
                height: 180,
                descriptionKey: 'fbProfileSize',
              },
              {
                titleKey: 'coverPhoto',
                width: 820,
                height: 312,
                descriptionKey: 'fbCoverPhotoSize',
              },
            ],
          },
        ],
      },
    ],
  },
  tabsIds: [TABS.ADJUST, TABS.ANNOTATE, TABS.WATERMARK, TABS.FILTERS, TABS.DRAW, TABS.RESIZE, TABS.FINETUNE], // or ['Adjust', 'Annotate', 'Watermark']
  defaultTabId: TABS.ANNOTATE, // or 'Annotate'
  defaultToolId: TOOLS.TEXT, // or 'Text'
};

// Assuming we have a div with id="editor_container"
const filerobotImageEditor = new FilerobotImageEditor(
  document.querySelector('#editor_container'),
  config,
);

filerobotImageEditor.render({
  onClose: (closingReason) => {
    console.log('Closing reason', closingReason);
    filerobotImageEditor.terminate();
  },
});

    $('#add-image').on('change', function(event) {
        const file = event.target.files[0];
        if (file && file.type.startsWith('image/')) {
            let temp = window.URL.createObjectURL(file);
            var $p = $('<div class="uploaded-img" style="background-image:url('+temp+');"></div>');
            $('#add-image').before($p);
        }
    });

    $(document).on('click', '.uploaded-img', function() {
        $('.uploaded-img').each(function() {
            $(this).removeAttr('data-image-editor-active-image');
        });
        $(this).attr('data-image-editor-active-image', '');

        if (filerobotImageEditor) {
            filerobotImageEditor.render({source: get_active_img()});
        }

    });
});

</script>
{%endblock%}
